كيف أقوم بإعادة التوجيه إلى صفحة ويب أخرى؟

1
2
التالى
لا يقوم المرء ببساطة بإعادة التوجيه باستخدام jQuery
jQuery ليس ضروريًا ، وستحاكي window.location.replace (...) بشكل أفضل إعادة توجيه HTTP.
window.location.replace (...) أفضل من استخدام window.location.href ، لأن الاستبدال () لا يحتفظ بالصفحة الأصلية في محفوظات الجلسة ، مما يعني أن المستخدم لن يعلق في خلفية لا تنتهي أبدًا- إخفاق زر.
إذا كنت تريد محاكاة شخص ما بالنقر فوق ارتباط ، فاستخدم
الموقع
إذا كنت تريد محاكاة إعادة توجيه HTTP ، فاستخدم location.replace
فمثلا:
// سلوك مشابه لإعادة توجيه HTTP
window.location.replace ("http://stackoverflow.com") ؛
// سلوك مشابه للنقر على رابط
window.location.href = "http://stackoverflow.com" ؛
|
تحذير: تم تقديم هذه الإجابة فقط كحل ممكن. من الواضح أنه ليس الحل الأفضل ، لأنه يتطلب jQuery. بدلاً من ذلك ، تفضل حل JavaScript النقي.
$ (location) .attr ('href'، 'http://stackoverflow.com')
|
طريقة جافا سكريبت "الفانيليا" القياسية لإعادة توجيه الصفحة
window.location.href = 'newPage.html' ؛
أو ببساطة أكثر: (بما أن النافذة عالمية)
location.href = 'newPage.html'؛
إذا كنت هنا لأنك تفقد HTTP_REFERER عند إعادة التوجيه ، فاستمر في القراءة:
(وإلا تجاهل هذا الجزء الأخير)
القسم التالي مخصص لأولئك الذين يستخدمون HTTP_REFERER كواحد من العديد من إجراءات الأمان (على الرغم من أنه ليس إجراء وقائيًا رائعًا). إذا كنت تستخدم Internet Explorer 8 أو إصدارًا أقل ، فستفقد هذه المتغيرات عند استخدام أي شكل من أشكال إعادة توجيه صفحات JavaScript (location.href ، إلخ).
فيما يلي سنقوم بتنفيذ بديل لـ IE8 وأقل حتى لا نفقد HTTP_REFERER. بخلاف ذلك ، يمكنك دائمًا استخدام window.location.href دائمًا.
يمكن أن يساعد الاختبار مقابل HTTP_REFERER (لصق عنوان URL ، والجلسة ، وما إلى ذلك) في معرفة ما إذا كان الطلب شرعيًا أم لا.
(ملاحظة: هناك أيضًا طرق للتغلب على هذه الإحالات / تزييفهم ، كما هو موضح بواسطة رابط droop في التعليقات)
حل اختبار بسيط عبر المستعرضات (الرجوع إلى window.location.href لـ Internet Explorer 9+ وجميع المتصفحات الأخرى)
الاستخدام: إعادة التوجيه ('anotherpage.aspx') ؛
إعادة توجيه الوظيفة (url) {
var ua = navigator.userAgent.toLowerCase () ،
isIE = ua.indexOf ('msie')! == -1 ،
الإصدار = parseInt (ua.substr (4، 2)، 10) ؛
// Internet Explorer 8 والإصدارات الأقدم
إذا (isIE && version <9) {
var link = document.createElement ('a') ؛
link.href = عنوان url ؛
document.body.appendChild (رابط) ؛
link.click () ؛
}
// يمكن لجميع المتصفحات الأخرى استخدام window.location.href القياسية (لا تفقد HTTP_REFERER مثل Internet Explorer 8 والإصدارات الأقل)
آخر {
window.location.href = url ؛
}
}
|
هناك الكثير من الطرق للقيام بذلك.
// window.location
window.location.replace ("http://www.example.com")
window.location.assign ("http://www.example.com")
window.location.href = "http://www.example.com"
document.location.href = '/ المسار'
// window.history
window.history.back ()
window.history.go (-1)
// window.navigate ؛ فقط للإصدارات القديمة من Internet Explorer
window.navigate ("top.jsp")
// ربما لا يوجد بوينو
self.location = 'http://www.example.com' ؛
top.location = 'http://www.example.com' ؛
// مسج
$ (location) .attr ('href'، 'http: //www.example.com')
$ (window) .attr ('location'، 'http: //www.example.com')
$ (location) .prop ('href'، 'http://www.example.com')
|
يعمل هذا مع كل متصفح:
window.location.href = 'your_url' ؛
|
سيكون من المفيد لو كنت أكثر وصفيًا في ما تحاول القيام به. إذا كنت تحاول إنشاء بيانات مقسمة إلى صفحات ، فهناك بعض الخيارات في كيفية القيام بذلك. يمكنك إنشاء روابط منفصلة لكل صفحة تريد أن تتمكن من الوصول إليها مباشرة.
 1 
 2 
 3 
...
لاحظ أن الصفحة الحالية في المثال يتم التعامل معها بشكل مختلف في الكود ومع CSS.
إذا كنت تريد تغيير البيانات المقسمة إلى صفحات عبر AJAX ، فهذا هو المكان الذي سيأتي فيه jQuery. ما ستفعله هو إضافة معالج نقر إلى كل علامة من علامات الارتساء المطابقة لصفحة مختلفة. سوف يستدعي معالج النقر هذا بعض أكواد jQuery التي تذهب وتجلب الصفحة التالية عبر AJAX وتقوم بتحديث الجدول بالبيانات الجديدة. يفترض المثال أدناه أن لديك خدمة ويب تقوم بإرجاع بيانات الصفحة الجديدة.
$ (document) .ready (function () {
$ ('a.pager-link'). انقر (الوظيفة () {
var page = $ (this) .attr ('href'). split (/ \؟ /) [1] ؛
.ajax $ ({
اكتب: "POST" ،
url: '/ path-to-service'،
البيانات: الصفحة ،
النجاح: الوظيفة (المحتوى) {
$ ('# myTable'). html (محتوى) ؛ // يحل محل
}
}) ؛
عودة كاذبة؛ // لإيقاف الارتباط
}) ؛
}) ؛
|
أعتقد أيضًا أن location.replace (URL) هي أفضل طريقة ، ولكن إذا كنت تريد إخطار محركات البحث بشأن إعادة التوجيه (فهم لا يحللون شفرة جافا سكريبت لرؤية إعادة التوجيه) ، فيجب إضافة rel = "canonical" meta علامة على موقع الويب الخاص بك.
تعد إضافة قسم noscript مع علامة وصفية لتحديث HTML حلاً جيدًا أيضًا. أقترح عليك استخدام أداة إعادة توجيه JavaScript هذه إلىإنشاء عمليات إعادة التوجيه. كما أن لديها دعم Internet Explorer لتمرير مُحيل HTTP.
يبدو رمز عينة بدون تأخير كما يلي:







  



|
ولكن إذا أراد شخص ما إعادة التوجيه إلى الصفحة الرئيسية ، فيمكنه استخدام المقتطف التالي.
window.location = window.location.host
سيكون من المفيد إذا كان لديك ثلاث بيئات مختلفة مثل التطوير والتشغيل والإنتاج.
يمكنك استكشاف هذه النافذة أو الكائن window.location بمجرد وضع هذه الكلمات في Chrome Console أو Firebug's Console.
|
توفر لك JavaScript العديد من الطرق لاسترداد وتغيير عنوان URL الحالي المعروض في شريط عنوان المتصفح. تستخدم كل هذه الطرق كائن الموقع ، وهو خاصية لكائن النافذة. يمكنك إنشاء كائن موقع جديد له عنوان URL الحالي على النحو التالي ..
var currentLocation = window.location ؛
الهيكل الأساسي لعنوان URL
//:/ 
البروتوكول - يحدد اسم البروتوكول الذي سيتم استخدامه للوصول إلى المورد على الإنترنت. (HTTP (بدون SSL) أو HTTPS (مع SSL))
اسم المضيف - يحدد اسم المضيف المضيف الذي يمتلك المورد. على سبيل المثال ، www.stackoverflow.com. يوفر الخادم خدمات باستخدام اسم المضيف.
المنفذ - رقم المنفذ المستخدم للتعرف على عملية معينة يتم إعادة توجيه رسالة الإنترنت أو رسالة شبكة أخرى إليها عند وصولها إلى الخادم.
اسم المسار - يعطي المسار معلومات حول المورد المحدد داخل المضيف الذي يريد عميل الويب الوصول إليه. على سبيل المثال ، stackoverflow.com/index.html.
الاستعلام - تتبع سلسلة الاستعلام مكون المسار ، وتوفر سلسلة من المعلومات التي يمكن للمورد استخدامها لبعض الأغراض (على سبيل المثال ، كمعلمات للبحث أو كبيانات يجب معالجتها).
التجزئة - جزء الارتساء من عنوان URL ، يتضمن علامة التجزئة (#).
باستخدام خصائص كائن الموقع هذه ، يمكنك الوصول إلى جميع مكونات URL هذه
التجزئة - لتعيين أو إرجاع جزء الارتساء من عنوان URL.
المضيف - مجموعات
أو إرجاع اسم المضيف ومنفذ عنوان URL.
اسم المضيف - مجموعات أو
يسترجع اسم مضيف URL.
href- مجموعات أو إرجاع كامل
URL.
اسم المسار - مجموعات أو إرجاع اسم مسار URL.
port- يضبط أو يعيد رقم المنفذ الذي يستخدمه الخادم لعنوان URL.
بروتوكول - يحدد أو يعرض بروتوكول عنوان URL.
مجموعات البحث
أو إرجاع جزء الاستعلام من عنوان URL
الآن إذا كنت تريد تغيير صفحة أو إعادة توجيه المستخدم إلى بعض الصفحات الأخرى ، يمكنك استخدام خاصية href الخاصة بكائن الموقع مثل هذا
يمكنك استخدام خاصية href لكائن الموقع.
window.location.href = "http://www.stackoverflow.com" ؛
يحتوي كائن الموقع أيضًا على هذه الطرق الثلاث
تعيين () - يقوم بتحميل مستند جديد.
إعادة تحميل () - لإعادة تحميل المستند الحالي.
استبدال () - لاستبدال المستند الحالي بآخر جديد
يمكنك استخدام طرق التعيين () والاستبدال أيضًا لإعادة التوجيه إلى صفحات أخرى مثل هذه
location.assign ("http://www.stackoverflow.com") ؛
location.replace ("http://www.stackoverflow.com") ؛
كيف يختلف التعيين () والاستبدال () - الاختلاف بين طريقة الاستبدال () وطريقة التعيين () ، هو أن الاستبدال () يزيل عنوان URL للمستند الحالي من محفوظات المستند ، مما يعني أنه لا يمكن استخدامه زر "رجوع" للعودة إلى المستند الأصلي. لذا استخدم طريقة التعيين () إذا كنت تريد تحميل مستند جديد ، وتريد إعطاء خيار العودة إلى المستند الأصلي.
يمكنك تغيير خاصية href للكائن الموقع باستخدام jQuery أيضًا بهذا الشكل
$ (الموقع) .attr ('href'، url)؛
وبالتالي يمكنك إعادة توجيه المستخدم إلى عنوان url آخر.
|
في الأساس jQuery هو مجرد إطار عمل JavaScript وللقيام ببعض الأشياء مثل إعادة التوجيه في هذه الحالة ، يمكنك فقط استخدام JavaScript خالص ، لذلك في هذه الحالة لديك 3 خيارات باستخدام الفانيلياجافا سكريبت:
1) باستخدام استبدال الموقع ، سيحل هذا محل السجل الحالي للصفحة ، مما يعني أنه لا يمكن استخدام زر الرجوع للعودة إلى الصفحة الأصلية.
window.location.replace ("http://stackoverflow.com") ؛
2) باستخدام تعيين الموقع ، سيحتفظ هذا بالسجل لك وباستخدام زر الرجوع ، يمكنك العودة إلى الصفحة الأصلية:
window.location.assign ("http://stackoverflow.com") ؛
3) أوصي باستخدام إحدى الطرق السابقة ، ولكن قد يكون هذا هو الخيار الثالث باستخدام JavaScript خالص:
window.location.href = "http://stackoverflow.com" ؛
يمكنك أيضًا كتابة دالة في jQuery للتعامل معها ، ولكن لا يوصى بها لأنها وظيفة JavaScript نقية بسطر واحد فقط ، كما يمكنك استخدام جميع الوظائف المذكورة أعلاه بدون نافذة إذا كنت بالفعل في نطاق النافذة ، على سبيل المثال window.location.replace ("http://stackoverflow.com") ؛ يمكن أن يكون location.replace ("http://stackoverflow.com") ؛
كما أريهم جميعًا في الصورة أدناه:
|
يجب أن تكون قادرة فقط على ضبط باستخدام window.location.
مثال:
window.location = "https://stackoverflow.com/" ؛
إليك منشور سابق حول الموضوع: كيف يمكنني إعادة التوجيه إلى صفحة ويب أخرى؟
|
قبل أن أبدأ ، jQuery هي مكتبة JavaScript تُستخدم لمعالجة DOM. لذلك يجب ألا تستخدم jQuery لإعادة توجيه الصفحة.
اقتباس من Jquery.com:
بينما قد يتم تشغيل jQuery دون مشاكل كبيرة في الإصدارات القديمة من المتصفح ،
نحن لا نختبر jQuery بفاعلية فيها ولا نصلح الخلل بشكل عام
التي قد تظهر فيها.
تم العثور عليها هنا:
https://jquery.com/browser-support/
لذا فإن jQuery ليس حلاً نهائيًا وعامًا للتوافق مع الإصدارات السابقة.
الحل التالي باستخدام JavaScript خام يعمل في جميع المتصفحات وكان قياسيًا لفترة طويلة ، لذلك لا تحتاج إلى أي مكتبات لدعم المستعرضات.
ستتم إعادة توجيه هذه الصفحة إلى Google بعد 3000 مللي ثانية